<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>作业隔行变色</title>
		<style>
			*{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<table width="500px" height="400px" border="0" cellspacing="1" align="center" >
			<tr>
				<td>序号</td>
				<td>姓名</td>
				<td>课程</td>
				<td>成绩</td>
			</tr>
			<tr>
				<td>1</td>
				<td>吕不韦</td>
				<td>语文</td>
				<td>100</td>
			</tr>
			<tr>
				<td>2</td>
				<td>吕布</td>
				<td>日语</td>
				<td>100</td>
			</tr>
			<tr>
				<td>3</td>
				<td>吕蒙</td>
				<td>营销学</td>
				<td>100</td>
			</tr>
			<tr>
				<td>4</td>
				<td>吕尚</td>
				<td>数学</td>
				<td>100</td>
			</tr>
			<tr>
				<td>5</td>
				<td>吕雉</td>
				<td>英语</td>
				<td>100</td>
			</tr>
			<tr>
				<td>6</td>
				<td>吕超</td>
				<td>体育</td>
				<td>100</td>
			</tr>
		</table>
		
		<script>
			var trs = document.getElementsByTagName("tr");
			for(var i = 0; i < trs.length; i++) {
				trs[0].style.backgroundColor = "dodgerblue";
				if(i % 2 != 0) {
					trs[i].style.backgroundColor = "gainsboro";
				} else {
					trs[i].style.backgroundColor = "gray";
				}
			}
			
			
			var color = "";
			for(var i = 1; i < trs.length; i++) {
				trs[i].onmouseover = function() {
					color = this.style.backgroundColor;
					this.style.backgroundColor = "white";
				}
				trs[i].onmouseout = function() {
					this.style.backgroundColor = color;
				}
			}
		</script>
	</body>
</html>
